<template>
  <div class="ly-content">
    <div class="ly-center">
      <div class="member-head" @click="inputClick">
        <div class="head" :style="{backgroundImage:'url('+userInfo.faceImgUrl+')'}"></div>
        <input ref="file" type="file" style="display: none" accept="image/*" capture="camera"
               @change="inputOnChange($event)"/>
        <div class="tips">人脸注册</div>
      </div>
      <yd-cell-group>
        <yd-cell-item>
          <span slot="left">姓名&nbsp;</span>
          <input slot="right" v-model="userInfo.userName" type="text" readonly>
        </yd-cell-item>
        <yd-cell-item>
          <span slot="left">手机号&nbsp;</span>
          <input slot="right" v-model="userInfo.cellPhone" type="number" readonly>
        </yd-cell-item>
        <!--<yd-cell-item>-->
          <!--<span slot="left">身份证号&nbsp;</span>-->
          <!--<input slot="right" v-model="userInfo.idCard" type="text" readonly placeholder="请输入身份证号">-->
        <!--</yd-cell-item>-->
      </yd-cell-group>

      <yd-cell-group title="我的成员">

        <yd-cell-item v-for="item in members" :key="item.id" arrow @click.native="goModifyMember(item.id)">
          <span slot="left">{{item.userName}}&nbsp;</span>
        </yd-cell-item>

      </yd-cell-group>


      <yd-button type="primary" class="ly-btn" size="large" @click.native="handleAdd()">添加成员</yd-button>

    </div>

  </div>

</template>

<script>
  import http from "../../http";
  import Compressor from 'compressorjs';
  import storage from "../../store/storage.js";

  export default {
    data() {
      return {
        housingName: "",
        members: [],
        userInfo: {},
        housingId: '',
      };
    },
    created: function () {
      // const housingId = storage.get("house-id");
      if (this.$route.query.housingId) {
        this.housingId = this.$route.query.housingId
      } else {
        this.housingId = storage.getObj("housingId").id;
        storage.put("house-id", this.housingId);
      }
      //先判断是否有appID
      this.getAppId();
    },
    methods: {


      getAppId: function () {

        // 判断是否有appid
        const appId = this.$route.query.appId;
        if (appId) { // 如果有则缓存到页面中
          storage.put("appId", appId, 'local');
          // this.getUserInfo(appId);
          this.getRkInfo(localId, this.housingId );
        } else {//没有
          //先判断缓存里面有没有
          const localId = storage.get('appId', 'local');
          console.log(localId);
          if (localId) {
            // this.getUserInfo(localId);
            this.getRkInfo(localId, this.housingId );
          } else {
            console.log("没有APPID");
            // this.$dialog.toast({
            //   mes: "请从公众号菜单栏中进入！",
            //   timeout: 1500
            // });
          }

        }

      },
      getUserInfo: function (id) {
        http.get("/communityApps/personalCenter/userInfo").then(res => {
          if (res.data.code == 20000) {
            if (res.data.data.isAuthentication == -1) {
              console.log("未认证");
              //跳转认证页面
              this.$router.replace({path: '/rongke/attestation', query: {appId: id,}});

            } else if (res.data.data.isAuthentication == 2) {
              console.log("审核拒绝");
              this.$router.replace("/rongke/friendly");
            } else if (res.data.data.isAuthentication == 3) {
              console.log("审核中");
              this.$router.replace("/rongke/friendly");
            } else {
              console.log("已认证");
              // 拉取用户信息
              this.getRkInfo();

            }
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },
      getRkInfo: function (id, housingId) {
        http.get("/communityApps/personalCenter/newUserInfo", {housingId}).then(res => {
          console.log(res);
          if (res.data.code == 20000) {
            if (res.data.data.userInfo.isAuthentication == -1) {
              console.log("未认证");
              //跳转认证页面
              this.$router.replace({path: '/rongke/attestation', query: {appId: id,}});

            } else if (res.data.data.userInfo.isAuthentication == 2) {
              console.log("审核拒绝");
              this.$router.replace("/rongke/friendly");
            } else if (res.data.data.userInfo.isAuthentication == 3) {
              console.log("审核中");
              this.$router.replace("/rongke/friendly");
            } else {
              console.log("已认证");
              this.housingName = res.data.data.housingName;
              this.members = res.data.data.members;
              this.userInfo = res.data.data.userInfo;
            }
          } else {
            this.$dialog.toast({
              mes: res.data.message,
              timeout: 1500
            });
          }
        });
      },


      inputClick: function () {
        this.$refs.file.click();
      },


      inputOnChange: function (e) {
        const file = e.target.files[0];
        if (!file) {
          return;
        }
        this.$dialog.loading.open('图片上传中...');
        new Compressor(file, {
          quality: 0.5,
          success: (result) => {
            this.$dialog.loading.close();
            const formData = new FormData();
            formData.append('file', result, result.name);
            formData.append('housingId', this.housingId);
            http.postFile("/communityApps/personalCenter/face", formData).then(res => {
              if (res.data.code == 20000) {
                this.userInfo.faceImgUrl = res.data.data + '?r=' + Math.random();
                this.$dialog.toast({
                  mes: "人脸添加成功！",
                  timeout: 500,
                });
              } else {
                this.$dialog.toast({
                  mes: res.data.message,
                  timeout: 1500
                });
                this.userInfo.faceImgUrl = "";
              }
            });

          },
          error(err) {
            console.log(err.message);
          },
        });
      },


      handleAdd: function () {

        this.$router.push("/rongke/rkMember");

      },

      goModifyMember(id) {
        this.$router.push({path: '/rongke/modifyMember', query: {id: id,}});
      }

    }
  };
</script>

<style>
  .ly-box .yd-cell-right select {
    color: #555;
  }

</style>

<style scoped lang="scss">
  .member-head {
    width: 100%;
    height: 3.8rem;
    background: #fff url(../../assets/upload.png) no-repeat center;
    -webkit-background-size: 1.5rem;
    background-size: 1.5rem;
    border-bottom: 1px solid #eee;
    .head {
      width: 2.2rem;
      height: 2.2rem;
      margin: 0 auto;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 99%;
      position: relative;
      top: 0.8rem;
    }
    .tips {
      text-align: center;
      color: #666;
      margin-top: 0.8rem;
    }
  }

  .ly-btn {
    width: 86%;
    margin: 0.5rem auto 0.5rem;
  }
</style>
